<template>
  <div class="abcell-container">
    <!-- Header Section -->
    <header class="header">
      <div class="logo">
        <h1>Abcell 台账管理系统</h1>
      </div>
      <div class="admin-menu" ref="adminMenu">
        <div class="admin-dropdown"
             @click.stop="toggleDropdown"
             @mouseenter="cancelClose">
          <span class="admin-name">管理员</span>
          <img src="@/assets/ava.jpg" class="admin-avatar">
          <i class="dropdown-icon" :class="{'up': isDropdownOpen}">▼</i>
        </div>

        <transition name="dropdown">
          <ul class="dropdown-menu"
              v-show="isDropdownOpen"
              @mouseleave="scheduleClose">
            <li @click="navigateTo('profile')">个人中心</li>
            <li @click="navigateTo('settings')">系统设置</li>
            <li @click="logout">退出登录</li>
          </ul>
        </transition>

      </div>
    </header>
    <!-- Main Content -->
    <div class="main-content">
      <!-- Left Navigation Column -->
      <div class="left-nav-column">
        <div
          class="nav-item"
          :class="{'active': activeNav === 'samplelist'}"
          @click="setActiveNav('samplelist')"
        >
          <i class="nav-icon">📋</i>
          <span>细胞查询</span>
        </div>

        <div
          class="nav-item"
          :class="{'active': activeNav === 'ReagentManagement'}"
          @click="setActiveNav('ReagentManagement')"
        >
          <i class="nav-icon">➕</i>
          <span>试剂管理</span>
        </div>

        <!-- 批量导入 -->
        <div
          class="nav-item"
          :class="{'active': activeNav === 'batchimport'}"
          @click="setActiveNav('batchimport')"
        >
          <i class="nav-icon">📥</i>
          <span>批量导入</span>
        </div>

        <!-- 导出数据 -->
        <div
          class="nav-item"
          :class="{'active': activeNav === 'exportdata'}"
          @click="setActiveNav('exportdata')">
          <i class="nav-icon">📤</i>
          <span>细胞出库</span>
        </div>
        <!-- 最近操作记录 -->
        <div
          class="nav-item"
          :class="{'active': activeNav === 'operationrecords'}"
          @click="setActiveNav('operationrecords')">
          <i class="nav-icon">🕒</i>
          <span>最近操作记录</span>
        </div>

      </div>
      <div class="content-area">
        <component :is="currentComponent"/>
      </div>
    </div>
  </div>
</template>

<script>
import samplelist from '@/views/samplelist'
import ReagentManagement from '@/views/ReagentManagement'
import batchimport from '@/views/batchimport'
import exportdata from '@/views/exportdata'
import operationrecords from '@/views/operationrecords'

export default {
  components: {
    samplelist,
    ReagentManagement,
    batchimport,
    exportdata,
    operationrecords
  },
  data () {
    return {
      isDropdownOpen: false,
      activeNav: 'samplelist', // Default to 样本列表
      closeTimer: null
    }
  },
  computed: {
    // 使用动态组件时的计算属性
    currentComponent () {
      return this.activeNav // 组件名需要与activeNav值匹配
    }
  },
  mounted () {
    document.addEventListener('click', this.closeDropdown)
    document.addEventListener('keydown', this.handleKeyUp)
  },
  beforeDestroy () {
    document.removeEventListener('click', this.closeDropdown)
    document.removeEventListener('keydown', this.handleKeyUp)
    clearTimeout(this.closeTimer)
  },
  methods: {
    setActiveNav (nav) {
      this.activeNav = nav
    },
    toggleDropdown (e) {
      e.stopPropagation()
      this.isDropdownOpen = !this.isDropdownOpen
    },
    navigateTo (route) {
      console.log(`Navigating to ${route}`)
      this.isDropdownOpen = false
    },
    cancelClose () {
    // 鼠标进入时取消关闭
      clearTimeout(this.closeTimer)
    },
    scheduleClose () {
    // 鼠标离开菜单时延迟关闭
      this.closeTimer = setTimeout(() => {
        this.isDropdownOpen = false
      }, 300)
    },
    closeDropdown (e) {
      const adminMenu = this.$refs.adminMenu
      if (!adminMenu.contains(e.target)) {
        this.isDropdownOpen = false
      }
    },
    handleKeyUp (e) {
      if (e.key === 'Escape' && this.isDropdownOpen) {
        this.isDropdownOpen = false
      }
    },
    logout () {
      console.log('Logging out...')
      this.isDropdownOpen = false
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>
/* 基础样式重置 */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Arial', sans-serif;
  overflow: hidden; /* 防止整个页面滚动 */
}

/* 主容器 */
.abcell-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden; /* 防止容器本身产生滚动 */
  /* 其他样式保持不变... */
  padding: 10px; /* 为阴影留出空间 */
}

/* 头部样式保持不变 */
.header {
  width: 98.3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #558ec6;
  color: white;
  flex-shrink: 0;
  position: fixed;
  z-index: 1000;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  width: 99%;
  height: calc(100vh - 80px);
  flex: 1;
  position: fixed;
}

/* 左侧导航栏 */
.left-nav-column {
  width: 200px;
  height: 650px;
  margin-top: 15px;
  border-right: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 15px 0;
  overflow-y: auto;
  flex-shrink: 0;
  position: fixed;
  top: 80px;
  background-color: #ebeced;
  z-index: 2;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 20px;
  margin-left: 210px;
  margin-bottom: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  top: 75px;
  background-color: #fff;
  min-width: 0; /* 修复Flexbox文本溢出问题 */
  /* 阴影修正 */
  box-shadow:
    2px 0 10px rgba(0, 0, 0, 0.2), /* 右侧阴影 */
    0 2px 10px rgba(0, 0, 0, 0.2); /* 底部阴影 */
  border-radius: 8px; /* 添加圆角使阴影更自然 */
  margin-right: 10px; /* 为阴影留出空间 */
  margin-top: 10px; /* 为阴影留出空间 */
  z-index: 1; /* 确保阴影在层级上方 */
}

/* 其他样式保持不变 */
.logo h1 {
  margin: 0;
  font-size: 24px;
  color: #fff;
}

.admin-menu {
  position: relative;
  display: inline-block;
  z-index: 1001;
}

.admin-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.admin-dropdown:hover {
  background-color: rgba(52, 73, 94, 0.16);
}
.admin-name {
  margin-right: 10px;
}

.admin-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 5px;
}

.dropdown-icon {
  font-size: 12px;
  transition: transform 0.3s;
}

.dropdown-icon.up {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0;
  margin: 5px 0 0;
  list-style: none;
  z-index: 1001;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.dropdown-menu li {
  padding: 10px 15px;
  color: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  transition: background-color 0.3s;
}
.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* 过渡效果 */
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease;
}
.dropdown-enter,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #555;
}

.nav-item:hover {
  background-color: #d4d9df;
  color: #7e86ba;
  border-right: 1px solid #1976d2;
}

.nav-item.active {
  background-color: #d4dde6;
  color: #1976d2;
  border-right: 3px solid #1976d2;
}

.nav-icon {
  margin-right: 10px;
  font-size: 18px;
}
</style>
